<template>
   <!-- 三级分类 -->
   <Category :scene="scene"></Category>
   <el-card style="margin: 10px 0;">
      <div v-show="scene == 0">
         <el-button type="primary" icon="Plus" :disabled="categoryStore.c3Id ? false : true"
            @click="addSpu">添加SPU</el-button>
         <!-- 展示已有的SPU数据 -->
         <el-table style="margin: 10px 0;" border :data="records">
            <el-table-column label="序号" width="80px" align="center" type="index"></el-table-column>
            <el-table-column label="SPU名称" prop="spuName"></el-table-column>
            <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
            <el-table-column label="SPU操作">
               <template #="{ row, $index }">
                  <!-- row即为已有的SPU对象 -->
                  <el-button type="primary" icon="Plus" title="添加SKU" size="small" @click="addSku(row)"></el-button>
                  <el-button type="primary" icon="Edit" title="修改SPU" size="small" @click="updateSpu(row)"></el-button>
                  <el-button type="primary" icon="View" title="查看SKU列表" size="small" @click="viewsku(row)"></el-button>
                  <el-popconfirm :title="`你确定要删除${row.spuName}吗?`" width="260px" @confirm="deleteSpu(row)">
                     <template #reference>
                        <el-button type="primary" icon="Delete" title="删除SPU" size="small"></el-button>
                     </template>
                  </el-popconfirm>
               </template>
            </el-table-column>
         </el-table>
         <!-- 分页器 -->
         <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 9]"
            :background="true" layout="prev, pager, next, jumper, ->, sizes, total" :total="total"
            @current-change="getHasSpu" @size-change="changeSize" />
      </div>
      <!-- 添加SPU|修改SPU子组件 -->
      <SpuForm ref="spu" v-show="scene == 1" @changeScene="changeScene"></SpuForm>
      <!-- 添加SKU子组件 -->
      <SkuForm ref="sku" v-show="scene == 2" @changeScene="changeScene"></SkuForm>
      <!-- dialog对话框：展示已有的SKU数据 -->
      <el-dialog title="SKU列表" v-model="show">
         <el-table border :data="skuArr">
            <el-table-column label="sku名字" prop="skuName"></el-table-column>
            <el-table-column label="sku价格" prop="price"></el-table-column>
            <el-table-column label="sku重量" prop="weight"></el-table-column>
            <el-table-column label="sku图片">
               <template #="{ row, $index }">
                  <img :src="row.skuDefaultImg" style="width: 100px; height: 100px;">
               </template>
            </el-table-column>
         </el-table>
      </el-dialog>
   </el-card>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, watch } from 'vue';
import { reqHasSpu, reqSkuInfo, reqRemoveSpu } from '@/api/product/spu/index'
// 引入子组件
import SkuForm from './skuForm.vue'
import SpuForm from './spuForm.vue'
import type { HasSpuResponseData, Records, SpuData, SkuInfoResponseData, SkuData } from '@/api/product/spu/type'
// 引入分类的仓库
import useCategoryStore from '@/store/modules/category'
import { ElMessage } from 'element-plus';
//获取子组件实例SpuForm
let spu = ref<any>()
//获取子组件实例SkuForm
let sku = ref<any>()
let categoryStore = useCategoryStore()
// 场景的数据
let scene = ref<number>(0)    //0:显示已有的SPU数据的结构，1：添加|修改SPU数据的结构，2：添加SKU数据的结构
// 分页器默认页码
let pageNo = ref<number>(1)
// 每一页展示几条数据
let pageSize = ref<number>(3)
// SPU总数
let total = ref<number>(0)
// 存储已有的SPU数据
let records = ref<Records>([])
// 存储sku数据
let skuArr = ref<SkuData[]>([])
// 控制dialog的显示与隐藏
let show = ref<boolean>(false)
// 监听三级分类id变化
watch(() => categoryStore.c3Id, () => {
   // 务必保证有三级分类id
   if (!categoryStore.c3Id) return
   getHasSpu()
})
// 获取某一个三级分类下已有的SPU数据
const getHasSpu = async (pager = 1) => {
   // 修改当前页码
   pageNo.value = pager
   let result: HasSpuResponseData = await reqHasSpu(pageNo.value, pageSize.value, categoryStore.c3Id)
   if (result.code == 200) {
      records.value = result.data.records
      total.value = result.data.total
   }
}
// 分页器的下拉菜单值发生变化时触发
const changeSize = () => {
   getHasSpu()
}
// 添加新的SPU按钮的回调
const addSpu = () => {
   // 切换为场景1
   scene.value = 1
   spu.value.initAddSpu(categoryStore.c3Id)
}
// 子组件SpuForm绑定自定义事件：目前是让子组件通知父组件切换场景0
const changeScene = ({ flag, params }: any) => {
   // 子组件Spuform点击取消按钮变为场景0，展示已有的SPU数据
   scene.value = flag
   // 再次获取全部的已有的SPU
   if (params == 'update') {
      // 更新留在当前页
      getHasSpu(pageNo.value)
   } else {
      // 添加返回第一页
      getHasSpu()
   }
}
// 修改Spu按钮的回调
const updateSpu = (row: SpuData) => {
   scene.value = 1
   // 调用子组件的实例方法获取完整的SPU数据
   spu.value.initHasSpuData(row)
}
// 添加Sku按钮的回调
const addSku = (row: SpuData) => {
   // 切换为场景2
   scene.value = 2
   // 调用子组件的方法初始化添加SKU的数据
   sku.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row)
}
// 查看sku按钮的回调
const viewsku = async (row: SpuData) => {
   let result: SkuInfoResponseData = await reqSkuInfo((row.id as number))
   if (result.code == 200) {
      // 存储数据
      skuArr.value = result.data
      // 显示dialog对话框
      show.value = true
   }
}
//删除SPU按钮的回调
const deleteSpu = async (row: SpuData) => {
   let result = await reqRemoveSpu((row.id as number))
   if (result.code == 200) {
      ElMessage.success('删除SPU成功！')
      // 获取剩余SPU数据
      getHasSpu(records.value.length > 1 ? pageNo.value : pageNo.value - 1)
   } else {
      ElMessage.error(`删除SPU失败！${result.data}`)
   }
}
// 路由组件销毁前，清空分类仓库中的数据
onBeforeUnmount(() => {
   categoryStore.$reset()
})
</script>

<style lang="scss" scoped></style>